<template>
  <div class="AddFirst">
    <AddHeader title="修改部门"/>
    <div class="content">
      <div class="content-box">
        <div>上级部门</div>
        <select v-model="DepartmentInfo.dparentName">
          <option value="">请选择上级部门</option>
          <option v-for="(item,i) in firstDepartmentList" :key="i">{{item}}</option>
        </select>
      </div>
      <div class="content-box">
        <div>部门名称</div>
        <input v-model="DepartmentInfo.dname" type="text" placeholder="控制在10个字、20个字节以内">
      </div>
      <div class="content-box">
        <div>部门负责人</div>
        <input v-model="DepartmentInfo.dadimin" type="text" placeholder="控制在5个字、10个字节以内">
      </div>
      <div class="content-box">
        <div>负责人电话</div>
        <input v-model="DepartmentInfo.dphone" type="text" placeholder="控制在15个字符以内">
      </div>
      <div class="content-box">
        <div>负责人QQ</div>
        <input v-model="DepartmentInfo.dqq" type="text" placeholder="控制在10字节以内">
      </div>
      <div class="content-box">
        <div>负责人邮箱</div>
        <input v-model="DepartmentInfo.demail" type="text" placeholder="控制在50个字符以内">
      </div>
      <div class="content-box content-box-last">
        <div>部门简介</div>
        <textarea v-model="DepartmentInfo.ddescription" cols="30" rows="10" placeholder="控制在500个汉字以内"></textarea>
      </div>
    </div>
    <AddFooter @click.native="mySubmit" buttonInfo="修改部门"/>
  </div>
</template>

<script>
  import AddHeader from '@/components/Department/AddHeader.vue'
  import AddFooter from '@/components/Department/AddFooter.vue'
  export default {
    name:'ModifyInfoSecond',
    data () {
      return {
        firstDepartmentList:[],
        DepartmentInfo:{
          did: '',
          dname: '',
          dparentId: '',
          dadimin: '',
          dphone: '',
          dqq: '',
          demail: '',
          ddescription: '',
          dparentName: ''
        }
      }
    },
    components: {
      AddHeader,
      AddFooter
    },
    mounted () {
      if(this.$route.params.dId){
        this.getInfo(this.$route.params.dId)
        this.getFirstDepartmentList()
      }else{
        console.log('未获取到数据');
      }
    },
    methods: {
      getFirstDepartmentList(){
        this.$axios({
          url:`http://132.232.110.185/personnelManagement/department/showDepartmentFirst/0`,
          method: 'GET'
        }).then(
        response => {
            this.firstDepartmentList = response.data.data
        },
        error => {
          console.log(error)
        })
      },
      getInfo(dId){
        this.$axios({
          url: `http://132.232.110.185/personnelManagement/department/selectDepartmentById/${dId}`,
          method:'GET'
        }).then(
          response => {
            // console.log(response.data.data)
            this.DepartmentInfo = response.data.data[0]
          },
          error => {
            console.log(error)
          }
        )
      },
      mySubmit(){
        let mySelect = document.querySelector('select')
        for (const key in this.DepartmentInfo) {
          if (Object.hasOwnProperty.call(this.DepartmentInfo, key)) {
            const element = this.DepartmentInfo[key];
            // console.log(element)
            if(element.length === 0) {
              alert('请输入完整信息!')
              return
            }
          }
        }
        this.$axios({
          url:'http://132.232.110.185/personnelManagement/department/updateDepartment',
          method:'POST',
          params:{
            DName: this.DepartmentInfo.dname,
            DId: this.DepartmentInfo.did,
            DAdimin: this.DepartmentInfo.dadimin,
            DPhone: this.DepartmentInfo.dphone,
            DQq: this.DepartmentInfo.dqq,
            DEmail: this.DepartmentInfo.demail,
            DDescription: this.DepartmentInfo.ddescription,
            DParentName: this.DepartmentInfo.dparentName
          },
        }).then(
          response => {
            // console.log(response.data.msg);
            alert(response.data.msg)
            this.$router.push({
              name:'Information'
            })
          },
          error => {
            console.log('修改失败');
            console.log(error);
          }
        )
      }
    }
  }
</script>

<style scoped>
  body{
    background-color: lightgray;
  }
  .content{
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed lightgray;
    border-top: 1px solid lightgray;
  }
  .AddFirst{
    width: 94%;
    margin: auto;
    margin-top: 40px;
    background-color: white;
    padding-bottom: 50px;
  }
  .content-box{
    width: 100%;
    height: 40px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .content-box-last{
    height: 120px;
  }
  .content-box div{
    text-align: end;
    width: 150px;
    height: 40px;
    line-height: 40px;
    color: gray;
    font-size: 14px;
    font-weight: 600;
  }
  input,select{
    color: gray;
    padding-left: 10px;
    width: 950px;
    height: 40px;
    /* border: 1px solid gray;
    list-style: none; */
    border-style: 1px solid gray;
    outline-color: rgb(25, 166, 137);
  }
  input::-webkit-input-placeholder {
    /* placeholder颜色 */
    color: #aab2bd;
    /* placeholder字体大小 */
    font-size: 14px;
  }
  textarea{
    color: gray;
    padding-left: 12px;
    padding-top: 10px;
    width: 950px;
    height: 100px;
    outline-color: rgb(25, 166, 137);
  }
  textarea::-webkit-input-placeholder {
    /* placeholder颜色 */
    color: #aab2bd;
    /* placeholder字体大小 */
    font-size: 16px;
  }
</style>